<template>
	<view class="container">
		<view class="user-info">
			<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
			<view class="info">
				<text class="name">张三</text>
				<text class="role">学生</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item">
				<image src="/static/icons/profile.png" mode="aspectFit"></image>
				<text>个人资料</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<image src="/static/icons/schedule.png" mode="aspectFit"></image>
				<text>我的课表</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<image src="/static/icons/reservation.png" mode="aspectFit"></image>
				<text>我的预约</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<image src="/static/icons/wallet.png" mode="aspectFit"></image>
				<text>我的钱包</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="menu-item">
				<image src="/static/icons/settings.png" mode="aspectFit"></image>
				<text>设置</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods: {}
}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	
	.user-info {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin-right: 30rpx;
		}
		
		.info {
			.name {
				font-size: 36rpx;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.role {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	
	.menu-list {
		background: #FFFFFF;
		border-radius: 20rpx;
		
		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
			
			&:last-child {
				border-bottom: none;
			}
			
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			
			text {
				font-size: 30rpx;
				color: #333;
				flex: 1;
				
				&.iconfont {
					flex: none;
					color: #999;
				}
			}
		}
	}
}
</style> 